<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 
        border="1" ：规定表格边框的宽度。
        cellspacing="0": 规定单元格之间的空白。
     -->
    <table border="1" cellspacing="0">
        <!-- thead : 表头 -->
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <!-- tbody ：用于对 HTML 表格中的主体内容进行分组 -->
        <tbody>
            <!-- JS渲染 -->
        </tbody>
    </table>

    <script>
        // 提前准备好的数据
        var users = [
            { id:1,name:'前端小灰狼',age:18},
            { id:2,name:'公羊无衣',age:22},
            { id:3,name:'古艺散人',age:26}
        ]

        // 0.获取到tbody标签
        var tbody = document.querySelector('tbody')
        // 1.循环遍历users数据
        users.forEach(function(item){
            // 这里的item就是数组中的每一个对象
            console.log(item)
            // 2.每一个对象生成一个tr标签
            var tr = document.createElement('tr')
            // 3.循环遍历item
            for(var key in item){
                // 4.生成td标签
                var td = document.createElement('td')
                td.innerHTML = item[key]
                // 5.把td插入到tr标签内部
                tr.appendChild(td)
            }
            // 6.把本次的tr插入到tbody内部
            tbody.appendChild(tr)
        })
    </script>

</body>
</html>